<template>
  <div class="main">
    <div class="home-page-wrapper">
      <div v-show="showBackArrow" class="back-wrapper whi flex-h">
        <div class="backboxs" @click="$router.back()">
          <i class="imgIcon backimgs"></i>
          <span class="back">返回</span>
        </div>
        <div class="flex1"></div>
        <div class="backboxs right" @click="openShare">
          <img class="imgIcon" src="~/static/images/shareBlack.png" alt />
        </div>
      </div>
      <div class="home-nav-box flex-h fixedTab" v-show="showTabs" :style="showBackArrow ? 'top:0.78rem' : 'top:0'">
        <span @click="tabclick(1)" class="flex1">
          <i>课程</i>
          <b v-show="tabIndex === 1"></b>
        </span>
        <span @click="tabclick(3)" class="flex1">
          <i>问答</i>
          <b v-show="tabIndex === 3"></b>
        </span>
      </div>
      <scrollerEdit ref="scrollerBottom" lock-x @on-scroll="onScroll" @on-scroll-bottom="infinite" :bounce="false">
        <div class="home-content">
          <div class="title-box flex-h">
            <img class="left" :src="professorInfo.avatar" alt />
            <div class="flex1 center">
              <b>{{ professorInfo.name }}</b>
              <i>{{ professorInfo.agencyName }} · {{ professorInfo.title }}</i>
            </div>
            <span class="right" @click="agencyUserFollowUser" v-show="showBackArrow">
              <b :class="clickFollow ? 'notfollow' : ''">{{ clickFollow ? '已关注' : '+关注' }}</b>
            </span>
          </div>
          <div class="fans">
            <i>粉丝</i>
            <b>{{ professorInfo.fansCount }}</b>
            <i>回答</i>
            <b>{{ professorInfo.answerCount }}</b>
            <i>课程</i>
            <b>{{ professorInfo.courseCount }}</b>
          </div>
          <div class="expert-desc">
            <span class="desc">{{ professorInfo.intro }}</span>
          </div>
          <div class="home-nav-box flex-h" ref="tabOffestHeight">
            <span @click="tabclick(1)" class="flex1">
              <i>课程</i>
              <b v-show="tabIndex === 1"></b>
            </span>
            <span @click="tabclick(3)" class="flex1">
              <i>问答</i>
              <b v-show="tabIndex === 3"></b>
            </span>
          </div>
          <div class="home-content-box">
            <div v-show="tabIndex == 1">
              <div v-if="hasVideoData">
                <div class="list">
                  <courseItem @openSharePopup="showShare = true" @openBuyVip="showBuyVipModle = true" :videoLists="videoList"></courseItem>
                  <load-more v-show="tabIndex == 1" :show-loading="showVideoLoading" :bounce="false" :tip="tipVideomsg"></load-more>
                </div>
              </div>
              <div v-else>
                <div class="noDataImage">
                  <img src="~/static/nothing/empty_article.png" alt />
                  <div class="describe">老师还没有发表过任何课程</div>
                </div>
              </div>
            </div>
            <div v-show="tabIndex == 3">
              <div v-if="hasQuestionData">
                <div class="questionArea">
                  <div class="singleQuestion" v-for="(item, index) of qusAndAnswerList" :key="index" @click="handleIntoQuestionDetail(item.questionId)">
                    <div class="qusTip">
                      <div class="tip">回答了问题</div>
                      <div class="time">{{ new Date(item.answerList[0].createtime).format('yyyy-MM-dd hh:mm') }}</div>
                    </div>
                    <div class="questionTitle">{{ item.title }}</div>
                    <div class="home-contentArea">
                      <div class="topMsg">
                        <div class="left">
                          <div class="proAvatar">
                            <img :src="professorInfo.avatar" alt />
                          </div>
                          <div class="proName">{{ professorInfo.name }}</div>
                        </div>
                        <div class="right">
                          <!-- <img
                            v-if="item.answerList[0].isLiked == 0"
                            src="~/static/icon/com_icon_favour_40_n.png"
                            class="isLiked"
                            alt
                          />
                          <img
                            v-else
                            src="~/static/icon/com_icon_favour_40_s.png"
                            class="isLiked"
                            alt
                          /> -->
                          <div class="isHelp">{{ item.answerList[0].helpCount == 0 ? '有帮助' : item.answerList[0].helpCount }}</div>
                        </div>
                      </div>
                      <div class="answer">{{ item.answerList[0].text }}</div>
                    </div>
                  </div>
                  <load-more v-show="tabIndex == 3" :show-loading="showLoading" :bounce="false" :tip="tipmsg"></load-more>
                </div>
              </div>
              <div v-else>
                <div class="noDataImage">
                  <img src="~/static/nothing/empty_article.png" alt />
                  <div class="describe">没有找到老师的回答</div>
                </div>
              </div>
            </div>
          </div>
          <div style="height:1rem"></div>
        </div>
      </scrollerEdit>
    </div>
    <span class="fixed-btn" v-show="showBackArrow" @click="commonJs.gopush('putQuestions')">向TA提问</span>
    <BuyVip :xBuy="showBuyVipModle" :serverName="serverName" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
    <sharePopup :showSharePopup="showShare" @cancel="showShare = false"></sharePopup>
  </div>
</template>
<script>
import { info, getProfessorQusAndAnsPage, professorInfo, getIndexCommodityList, agencyUserFollowUser } from '~/api/identity'
import { LoadMore } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import goBack from '~/components/goBack'
import { format } from '~/plugins/filter'
import courseItem from './components/courseItem'
import BuyVip from '~/components/BuyVip'
import wxapi from '~/plugins/wxapi.js'
import { showShare } from '~/components/share/index'
import sharePopup from './components/sharePopup'
export default {
  components: {
    goBack,
    LoadMore,
    courseItem,
    BuyVip,
    sharePopup,
    scrollerEdit,
  },
  data() {
    return {
      showShare: false,
      showBackArrow: true,
      showBuyVipModle: false,
      serverName: '查看专属升学课程',
      clickFollow: false,
      videoList: [],
      tabIndex: 1,
      showTabs: false,
      lessonsVOList: [],
      professionalParams: {
        pageNo: 1,
        pageSize: 10,
        pid: null,
      },
      qusAndAnswerList: [],
      totalPages: 0,
      showLoading: true,
      tipmsg: '加载更多',
      professorInfo: {}, // 专家详情
      currentPage: 1,
      showVideoLoading: true,
      tipVideomsg: '加载更多',
      hasVideoData: false,
      hasQuestionData: false,
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('shareExpert') || this.commonJs.GetUrlParam('mini_token')) {
      this.showBackArrow = false
    }
  },
  mounted: function() {
    this.$visit('Expert/' + this.commonJs.GetUrlParam('professorId'))
    wxapi.wxRegister()
    this.tabsOffsetTop = this.$refs.tabOffestHeight.offsetTop
    let professorId = this.commonJs.GetUrlParam('professorId') * 1
    if (professorId) {
      this.professionalParams.pid = professorId
      this.getProfessorInfo(professorId)
      this.getProfessorQusAndAnsPage()
      this.getIndexCommodityList()
    }
  },
  methods: {
    wxShare(pic, titles, descs, id) {
      let uri = window.location.href + '&shareExpert=' + true
      let option = {
        title: titles,
        desc: descs,
        link: uri,
        imgUrl: pic,
      }

      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    openShare() {
      showShare('open')
    },
    agencyUserFollowUser() {
      this.$loading('open')
      this.clickFollow = !this.clickFollow
      let actions
      this.clickFollow ? (actions = 1) : (actions = 0)
      let obj = {
        action: actions,
        toUserId: this.professionalParams.pid,
      }
      agencyUserFollowUser(obj)
        .then((res) => {
          if (res.code == '0') {
            this.$vux.toast.text(res.message)
          } else {
            this.$vux.toast.text(res.data.message)
          }
          this.$hideLoading()
        })
        .catch((err) => {
          this.$hideLoading()
        })
    },
    getIndexCommodityList() {
      let obj = {
        professorId: this.professionalParams.pid,
        pageSize: 10,
        pageNo: 1,
      }
      this.$loading('open')
      getIndexCommodityList(obj)
        .then((res) => {
          this.videoList = res.data.list
          if (this.videoList.length == 0) {
            this.hasVideoData = false
          } else {
            this.hasVideoData = true
          }
          this.totalVIdeoPAge = res.data.pages
          if (this.totalVIdeoPAge < 2) {
            this.showVideoLoading = false
            this.tipVideomsg = '没有更多课程'
          }
        })
        .catch((res) => {})
        .finally(() => {
          this.$hideLoading()
        })
    },
    tabclick(index) {
      this.tabIndex = index
      if (this.showTabs) {
        this.$refs.scrollerBottom.reset({
          top: this.tabsOffsetTop,
        })
      }
    },
    infinite() {
      if (this.tabIndex == 3) {
        if (this.professionalParams.pageNo < this.totalPages) {
          this.professionalParams.pageNo = this.professionalParams.pageNo + 1
          getProfessorQusAndAnsPage(this.professionalParams).then((res) => {
            if (res.code == '0') {
              let newArr = res.data.questionAnswerPageVO.list
              this.qusAndAnswerList = this.qusAndAnswerList.concat(newArr)
              this.totalPages = res.data.questionAnswerPageVO.pages
            }
          })
        } else {
          this.showLoading = false
          this.tipmsg = '没有更多问答'
        }
      } else {
        if (this.currentPage < this.totalVIdeoPAge) {
          this.currentPage += 1
          let obj = {
            professorId: this.professionalParams.pid,
            pageSize: 10,
            pageNo: this.currentPage,
          }
          getIndexCommodityList(obj)
            .then((res) => {
              let ary = res.data.list
              this.videoList = this.videoList.concat(newArr)
              this.totalVIdeoPAge = res.data.pages
            })
            .catch((res) => {})
        } else {
          this.showVideoLoading = false
          this.tipVideomsg = '没有更多课程'
        }
      }
    },
    goPlay(index) {
      let obj = {
        order: index,
        coverImg: this.coverImg,
        viodeList: this.lessonsVOList,
      }
      sessionStorage.setItem('videoPlayList', JSON.stringify(obj))
      this.commonJs.gopush('videoPlay')
    },
    onScroll(e) {
      if (e.top > this.tabsOffsetTop || e.top == this.tabsOffsetTop) {
        this.showTabs = true
      } else {
        this.showTabs = false
      }
    },
    getProfessorQusAndAnsPage() {
      this.$loading('open')
      getProfessorQusAndAnsPage(this.professionalParams)
        .then((res) => {
          if (res.code == 0) {
            const data = res.data.questionAnswerPageVO
            this.qusAndAnswerList = data.list
            if (this.qusAndAnswerList.length == 0) {
              this.hasQuestionData = false
            } else {
              this.hasQuestionData = true
            }
            this.totalPages = res.data.questionAnswerPageVO.pages
            if (this.totalPages < 2) {
              this.showLoading = false
              this.tipmsg = '没有更多问答'
            }
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    // 获取专家详情
    getProfessorInfo(id) {
      professorInfo({ agencyUserId: id }).then((res) => {
        if (res.code == 0) {
          this.professorInfo = res.data
          let follow = res.data.followStatus
          // (pic, titles, descs, id)
          this.wxShare(res.data.avatar, res.data.name, res.data.intro)
          if (follow) {
            this.clickFollow = true
          } else {
            this.clickFollow = false
          }
        }
      })
    },
    handleIntoQuestionDetail(id) {
      if (this.commonJs.GetUrlParam('shareExpert')) {
        if (this.commonJs.GetUrlParam('mini_token')) {
          this.$router.push({
            path: './questionDetail?shareExpert=true',
            query: {
              qid: id,
              mini_token: this.commonJs.GetUrlParam('mini_token'),
            },
          })
        } else {
          this.$router.push({
            path: './questionDetail?shareExpert=true',
            query: {
              qid: id,
            },
          })
        }
      } else {
        if (this.commonJs.GetUrlParam('mini_token')) {
          this.$router.push({
            path: './questionDetail',
            query: {
              qid: id,
              mini_token: this.commonJs.GetUrlParam('mini_token'),
            },
          })
        } else {
          this.$router.push({
            path: './questionDetail',
            query: {
              qid: id,
            },
          })
        }
      }
    },
  },
}
</script>

<style scoped lang="less">
.back-wrapper {
  width: 7.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  background: #fff;

  .backboxs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 1.2rem;
    height: 0.8rem;
    padding: 0.2rem 0;
  }

  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
  }
  .backimgs {
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size: 3rem 2.4rem;
  }
  .back {
    display: inline-block;
    margin-left: 0.1rem;
    font-weight: bold;
    color: #222;
  }
  .right {
    text-align: right;
    .imgIcon {
      margin-left: 0.8rem;
    }
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.tabLeft {
  /deep/img {
    max-width: 100%;
    height: auto;
  }
}
.home-page-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.home-content {
  width: 100%;
  overflow: hidden;
  .title-box {
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    margin: 0.4rem auto 0;
    align-items: flex-start;
    img {
      border-radius: 50%;
      overflow: hidden;
      width: 1.4rem;
      height: 1.4rem;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
    }
    .center {
      padding-left: 0.3rem;
      box-sizing: border-box;
      b,
      i {
        display: block;
      }
      b {
        font-size: 0.4rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        // line-height:64px;
      }
      i {
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 0.4rem;
      }
    }
    .right {
      width: 1.3rem;
      b {
        display: block;
        width: 100%;
        height: 0.6rem;
        text-align: center;
        line-height: 0.6rem;
        font-size: 0.26rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: @assistColor;
        border-radius: 0.3rem;
        border: 1px solid @assistColor;
      }
      .notfollow {
        background: #fafafa;
        color: #bbbbbb;
        border: 1px solid #fafafa;
      }
    }
  }
  .fans {
    padding: 0 0.3rem;
    box-sizing: border-box;
    margin-top: 0.25rem;
    i {
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      // line-height:0.4rem;
    }
    b {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      margin-left: 0.05rem;
      // line-height:48px;
    }
    i:nth-of-type(2),
    i:nth-of-type(3) {
      margin-left: 0.25rem;
    }
  }
  .expert-desc {
    width: 100%;
    height: auto;
    padding: 0.4rem 0.3rem;
    box-sizing: border-box;
    .desc {
      display: block;
      min-height: 1.5rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.1rem;
      padding: 0.25rem;
      box-sizing: border-box;
      font-size: 0.26rem;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 0.4rem;
    }
  }
  .home-content-box {
    width: 100%;
    height: auto;
    background: #fff;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    padding: 0.3rem 0;
    box-sizing: border-box;
    h3 {
      padding: 0 0.3rem;
      box-sizing: border-box;
      font-size: 0.36rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.5rem;
    }
    .list {
      width: 100%;
      height: auto;
      padding: 0 0.3rem;
      box-sizing: border-box;
      min-height: 100vh;
    }
    .questionArea {
      padding: 0 0.32rem;
      .singleQuestion {
        padding: 0.42rem 0 0.4rem;
        border-bottom: 1px solid #e5e8ed;
        .qusTip {
          color: #999;
          font-size: 0.26rem;
          line-height: 0.44rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.16rem;
        }
        .questionTitle {
          color: #222;
          font-size: 0.3rem;
          line-height: 0.48rem;
          font-weight: bold;
          margin-bottom: 0.16rem;
        }
        .home-contentArea {
          width: 100%;
          max-height: 1.94rem;
          padding: 0.24rem;
          background: #f7f7fa;
          .topMsg {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.16rem;
            .left {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .proAvatar {
                width: 0.5rem;
                height: 0.5rem;
                margin-right: 0.24rem;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .proName {
                color: #222;
                font-size: 0.28rem;
                font-weight: bold;
              }
            }
            .right {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .isLiked {
                width: 0.23rem;
                height: 0.24rem;
                margin-right: 0.13rem;
              }
              // .icon_zan_n {
              //   background: url('~/static/sprite/other_sprites.png') 3.4rem -3.2rem;
              //   background-size: 4.68rem 4.08rem;
              // }
              // .icon_zan_s {
              //   background: url('~/static/sprite/other_sprites.png') 2.8rem -3.2rem;
              //   background-size: 4.68rem 4.08rem;
              // }
              .isHelp {
                color: #c7c7c7;
                font-size: 0.24rem;
              }
            }
          }
          .answer {
            color: #999;
            font-size: 0.26rem;
            line-height: 0.4rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
      .singleQuestion:last-child {
        border-bottom: none;
      }
    }
  }
}
.home-nav-box {
  width: 100%;
  height: 1rem;
  background: #fff;
  border-bottom: solid 0.01rem rgba(229, 232, 237, 1);
  span {
    height: 1rem;
    overflow: hidden;
    i,
    b {
      display: block;
    }
    i {
      text-align: center;
      font-size: 0.3rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      height: 0.4rem;
      margin-top: 0.2rem;
    }
    b {
      width: 0.4rem;
      height: 0.08rem;
      background: @assistColor;
      border-radius: 0.04rem;
      margin: 0.1rem auto 0;
    }
  }
}
.fixedTab {
  position: fixed;
  left: 0;

  z-index: 102;
}
.fixed-btn {
  position: fixed;
  width: 2.6rem;
  height: 0.88rem;
  background: @assistColor;
  box-shadow: 0px 0.08rem 0.2rem 0px rgba(128, 213, 102, 0.3);
  border-radius: 0.44rem;
  text-align: center;
  line-height: 0.88rem;
  font-size: 0.3rem;
  font-family: 'PingFangSC-Semibold', PingFangSC;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  bottom: 0.4rem;
  left: 50%;
  margin-left: -1.3rem;
}
.noDataImage {
  text-align: center;
  // padding-top: 2.4rem;
  padding-bottom: 5rem;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
</style>
